<template>
	<view class="container">
		<view class="container-c">
			<view class="avatar" @tap="upAvatar">
				<image v-if="avatar==''" src="../../../static/icons/leju-logo.png" mode=""></image>
				<image v-else :src="avatar" mode=""></image>
			</view>
			<form @submit="formSubmit">
				<view class="ipt">
					<input placeholder-style="fontSize:28rpx;" type="number" placeholder="手机号" name="phone" />
					<input placeholder-style="fontSize:28rpx;" class="pwd" :type=pwdType placeholder="登录密码"
						name="password" />
					<uni-icons v-if="openEye==false" class="eye" @tap="changeEye" type="eye-slash" size="20">
					</uni-icons>
					<uni-icons v-else type="eye" class="eye" @tap="changeEye" size="20"></uni-icons>
					<input placeholder-style="fontSize:28rpx;" type="text" placeholder="用户名" name="username" />
					<input placeholder-style="fontSize:28rpx;" type="text" placeholder="昵称" name="nickname" />
					<input placeholder-style="fontSize:28rpx;" type="number" placeholder="验证码" />
					<button class="login" form-type="submit" type="default">注册</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import baseUrl from "@/api/baseUrl.js";
	import WxValidate from "@/validate/index.js";
	import {
		register
	} from "@/api/user/register/index.js"
	export default {
		data() {
			return {
				avatar: "",
				pwdType: 'password',
				openEye: false
			};
		},
		onLoad: function() {
			this.initValidate();
		},

		methods: {
			initValidate() {
				let rules = {
					phone: {
						required: true,
						tel: true
					},
					password: {
						required: true,
						minlength: 6
					},
					username: {
						required: true,					
					},
					nickname: {
						required: true,					
					}
				}
				let message = {
					phone: {
						required: '手机号为必填项',
						tel: '请输入合法的手机号'
					},
					password: {
						required: '密码为必填项',
						minlength: '密码最短为6位'
					},
					username: {
						required: '请填写用户名',
					},
					nickname: {
						required: '请填写昵称',
					}
				}
				//实例化当前的验证规则和提示消息
				this.WxValidate = new WxValidate(rules, message);
			},
			upAvatar() {
				var _this = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						uni.uploadFile({
							url: baseUrl + "/lejuClient/login/uploadAvatar",
							filePath: res.tempFilePaths[0],
							name: "file",
							success(result) {
								console.log(result)
								var obj = {};
								obj = JSON.parse(result.data);
								console.log(obj);
								_this.avatar = obj.data.fileUrl;
								console.log(this);
							}
						})
					}
				})
			},
			changeEye() {
				if (this.pwdType == 'password') {
					this.pwdType = "number";
					this.openEye = true;
				} else if (this.pwdType == "number") {
					this.pwdType = 'password';
					this.openEye = false;
				} else {
					this.pwdType = "number";
					this.openEye = true;
				}
			},
			formSubmit: function(e) {
				// console.log(e)
				let params = e.detail.value;
				// console.log(this.WxValidate.checkForm(params))
				if (!this.WxValidate.checkForm(params)) {
					//表单元素验证不通过，此处给出相应提示
					// console.log(this.WxValidate.errorList)
					let error = this.WxValidate.errorList[0];
					uni.showToast({
						title: error.msg,
						icon: "none"
					})
				}else{
					var obj = {
						phone: params.phone,
						password: params.password,
						username: params.username,
						nickname: params.nickname
					}
					register(obj).then(res=>{
						console.log(res)
						if(res.success==false){
							uni.showToast({
								title:res.message
							})
						}else if(res.success==true){
							uni.showToast({
								title:"注册成功,即将跳转到登录页面"
							})
							setTimeout(()=>{
								uni.navigateTo({
									url:"/pages/mine/login/login"
								})
							},1000)	
							
							uni.setStorageSync("user",obj)
						}
						
					})
				}
			}
			//验证通过，往下执行
			
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		background-color: #f1ece7;
		height: 100vh;
	}

	.container-c {
		width: 614rpx;
		margin: 0 auto;
	}

	.ipt {
		position: relative;
		padding-top: 50rpx;
		margin-bottom: 40rpx;

		.eye {
			position: absolute;
			right: 50rpx;
			top: 270rpx;
		}

		input {
			height: 36rpx;
			color: #333;
			margin-top: 40rpx;
			padding: 32rpx 64rpx;
			border-radius: 100rpx;
			box-shadow: 0 0 60rpx rgba(0, 0, 0, .1);
		}

		.login {
			margin-top: 120rpx;
			background-color: #354e44;
			color: #fff;
			text-align: center;
			line-height: 68rpx;
			padding: 16rpx;
			border-radius: 100rpx;
			box-shadow: 0 0 60rpx rgba(0, 0, 0, .1);
		}
	}

	.avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		margin: 0 auto;
		padding-top: 30rpx;

		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;

		}
	}
</style>
